import { Space, Table, Image } from "antd";
import type { ColumnsType } from "antd/es/table";
import React, { useEffect, useState } from "react";
import { getUsersApi, deleteUserApi } from "../../api/user";
import type { UserInfoS } from "../../api/api-types";

const data: UserInfoS[] = [
  {
    id: "1",
    username: "John Brown",
    email: "32",
    avatar: "New York No. 1 Lake Park",
    created_at: "",
    update_at: ""
  },
  {
    id: "2",
    username: "John Brown",
    email: "32",
    avatar: "New York No. 1 Lake Park",
    created_at: "",
    update_at: ""
  },
  {
    id: "3",
    username: "Joe Black",
    email: "32",
    avatar: "New York No. 1 Lake Park",
    created_at: "",
    update_at: ""
  },
];

const Welome: React.FC = () => {
  const [forms, setForms] = useState({
    page: 1,
    size: 10,
  });

  const [users, setUsers] = useState(data);

  const getUsers = async () => {
    const res = await getUsersApi(forms);
    setUsers(res);
  };

  const editUser = (text: UserInfoS) => {
    console.log(text); 
  }

  const deleteUser = async (text: UserInfoS) => {
    const res = await deleteUserApi(text.id)
    console.log(res);
  }
  
  useEffect(() => {
    getUsers();
  }, []);

  const columns: ColumnsType<UserInfoS> = [
  {
    title: "姓名",
    dataIndex: "username",
    key: "username",
    render: (text) => <a>{text}</a>,
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
  },
  {
    title: "头像",
    dataIndex: "avatar",
    key: "avatar",
    render: (text) => (
      <div>
        <Image
          width={50}
          src= { text }
        />
      </div>
    ),
  },
  {
    title: "操作",
    key: "action",
    render: text => (
      <Space size="middle">
        <a onClick={() => {
            editUser(text)
        }}>编辑</a>
        <a onClick={() => {
          deleteUser(text)
        }}>删除</a>
      </Space>
    ),
  },
];
  return <Table columns={columns} dataSource={users} />;
};

export default Welome;
